<template>
    <div class="editor_tool">
        <!-- <el-button v-blur circle type="info" @click="reset">
            <Icon name="el-icon-RefreshRight" color="#fff" size="14" />
        </el-button> -->
        <span @click="reset" class="tool_item">
            <span>重置</span>
        </span>
        <el-slider v-model="cardStore.editor.scale" :format-tooltip="formatTooltip" :step="0.01" :min="0.2" :max="1.5"
            class="slider" style="
        --el-slider-runway-bg-color: #696363;
        --el-slider-main-bg-color:#696363;
        " @change="sliderChange" />
    </div>
</template>
<script setup>
import { ref } from 'vue'
import { userCardStore, getBestPos } from '../../store/userCardStore'
const emit = defineEmits(['reset', 'scaleChange'])
const cardStore = userCardStore()
const reset = () => {
    const pos = getBestPos(cardStore.editor.width, cardStore.editor.height)
    emit('reset', pos)
}

const formatTooltip = (val) => {
    return parseInt(val * 100) + '%'
}

const sliderChange = (val) => {
    emit('scaleChange')
}
</script>

<style lang="less" scoped>
.editor_tool {
    position: fixed;
    bottom: 20px;
    right: 360px;
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #696363;

    .tool_item {
        cursor: pointer;

        &:hover {
            span {
                display: inline-block;
                animation: twinkle 0.3s ease-in-out;
            }
        }
    }

    .slider {
        margin-left: 20px;
        width: 100px;
    }
}
</style>